<template>
	<div class="index">
		<el-row>
			<el-col class="index-head" :span="24">
				<div class="index-head-left">收支大数据</div>
				<div class="index-head-right" @click="moreMsg"><i class="iconfont icon-haibijiahao"></i>更多消息</div>
			</el-col>
		</el-row>
		<el-row :gutter="30" class="cont-top">
			<el-col class="cont-top-left" :span="12">
				<ul class="cont-top-c">
					<li class="cont-top-c-item on">
						<p class="shouru">{{szdsj.dayIncome?szdsj.dayIncome.total:0}}</p>
						<p>今日收入</p>
						<el-button class="select" size="mini" round @click="dayinShow">查 看</el-button>
					</li>
					<li class="cont-top-c-item">
						<p class="zhichu">{{szdsj.dayOutlay?szdsj.dayOutlay.total:0}}</p>
						<p>今日支出</p>
						<el-button class="select" size="mini" round @click="dayoutShow">查 看</el-button>
					</li>
					<li class="cont-top-c-item">
						<p class="shouru">{{szdsj.monthIncome?szdsj.monthIncome.total:0}}</p>
						<p>本月收入</p>
						<el-button class="select" size="mini" round @click="monthinShow">查 看</el-button>
					</li>
					<li class="cont-top-c-item">
						<p class="zhichu">{{szdsj.monthOutlay?szdsj.monthOutlay.total:0}}</p>
						<p>本月支出</p>
						<el-button class="select" size="mini" round @click="monthoutShow">查 看</el-button>
					</li>
				</ul>
			</el-col>
			<el-col class="cont-top-right" :span="12">
				<ul class="cont-top-r">
					<li class="list-item" v-for="item in messageList" :key="item.mBh">
						<div class="list-item-title">【{{['','报名申请','报名审批','报销申请','报销审批','工资审批','报名作废','学时作废','检车预警','保险预警',''][item.messageType]}}】</div>
						<div class="list-item-cont">{{item.content}}</div>
						<div class="list-item-time">{{$moment(item.createDate).format('YYYY/M/D')}}</div>
					</li>
				</ul>
			</el-col>
		</el-row>
		<el-row class="index-echart" :gutter="30">
			<el-col :span="12">
				<div class="echart-cont">
					<p class="echart-title">{{$moment().format('YYYY年M月')}}份收入一览</p>
					<IEcharts :option="line1"></IEcharts>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="echart-cont">
					<p class="echart-title">{{$moment().format('YYYY年M月')}}份支出一览</p>
					<IEcharts :option="line2"></IEcharts>
				</div>
			</el-col>
		</el-row>
		<!-- 今日收入 -->
		<todayIn ref="dayin" v-show="dayin" :dayIncome="szdsj.dayIncome"></todayIn>
		<!-- 今日支出 -->
		<todayOut ref="dayout" v-show="dayout" :dayOutlay="szdsj.dayOutlay"></todayOut>
		<!-- 本月收入 -->
		<monthIn ref="monthin" v-show="monthin" :monthIncome="szdsj.monthIncome"></monthIn>
		<!-- 本月支出 -->
		<monthOut ref="monthout" v-show="monthout" :monthOutlay="szdsj.monthOutlay"></monthOut>
		<!-- 更多消息 -->
    	<moreMsg ref="moremeg" v-show="moremeg"></moreMsg>
	</div>
</template>

<script>
	import IEcharts from "vue-echarts-v3";
	import todayIn from "@/components/index-pop1";
	import todayOut from "@/components/index-pop2";
	import monthIn from "@/components/index-pop3";
	import monthOut from "@/components/index-pop4";
	import moreMsg from "@/components/more-msg";
	export default {
		name: "index",
		components: {
			IEcharts,
			todayIn,
			todayOut,
			monthIn,
			monthOut,
			moreMsg
		},
		mounted: function() {
			//hover
			$(".cont-top-c-item").hover(function() {
				$(this)
					.addClass("on")
					.siblings()
					.removeClass("on");
			});

			let that = this;

			//获取系统字典缓存
			that.$http.get("system/dicCache", d => {
				if(d.resultCode == 0) {
					session.set(process.env.SESSION_KEY_DIC, d.record);
				}
			});

			//获取驾校证书信息
			that.$http.get("main/index/getLicenseInfo", d => {
				if(d.resultCode == 0) {
					session.set(process.env.SESSION_KEY_LICENSEINFO, d.record);
				}
			});

			//获取收支大数据统计
			that.$http.get("main/index/szdsj", d => {
				if(d.resultCode == 0) {
					that.szdsj = d.record;
				}
			});

			//月份收入一览
			that.$http.get("main/index/yfsrtj", d => {
				if(d.resultCode == 0) {
					that.line1.xAxis.data = [];
					for(let i = 1; i <= d.record.length; i++) {
						that.line1.xAxis.data.push(i);
					}
					that.line1.series[0].data = d.record;
				}
			});

			//月份支出一览
			that.$http.get("main/index/yfzctj", d => {
				if(d.resultCode == 0) {
					that.line2.xAxis.data = [];
					for(let i = 1; i <= d.record.length; i++) {
						that.line2.xAxis.data.push(i);
					}
					that.line2.series[0].data = d.record;
				}
			});

			$.extend(that.$websocket._settings.events, {
				receiveMessage(d) {
					that.messageList = d.list;
				},
				alertMessage(d) {
					that.$websocket.send("updateMsg", d.msg.mbh);
					that.$notify({
						title: d.msg.title,
						message: d.msg.content
					});

				}
			});

			that.$websocket.connect();
		},
		methods: {
		// moremsg
    moreMsg() {
      let that = this;
      this.layIndex = layer.open({
        type: 1,
        shadeClose: true,
        title: "更多消息",
        skin: "layui-layer-rim", //加上边框
        area: ["80%", "600px"], //宽高
        content: $(that.$refs.moremeg.$el)
      });
    },
			dayinShow() {
				let that = this;
				this.layIndex = layer.open({
					type: 1,
					shadeClose: true,
					title: "",
					skin: "layui-layer-rim", //加上边框
					area: ["60%", "400px"], //宽高
					content: $(this.$refs.dayin.$el)
				});
			},
			dayoutShow() {
				let that = this;
				this.layIndex = layer.open({
					type: 1,
					shadeClose: true,
					title: "",
					skin: "layui-layer-rim", //加上边框
					area: ["60%", "400px"], //宽高
					content: $(this.$refs.dayout.$el)
				});
			},
			monthinShow() {
				let that = this;
				this.layIndex = layer.open({
					type: 1,
					shadeClose: true,
					title: "",
					skin: "layui-layer-rim", //加上边框
					area: ["60%", "400px"], //宽高
					content: $(this.$refs.monthin.$el)
				});
			},
			monthoutShow() {
				let that = this;
				this.layIndex = layer.open({
					type: 1,
					shadeClose: true,
					title: "",
					skin: "layui-layer-rim", //加上边框
					area: ["60%", "400px"], //宽高
					content: $(this.$refs.monthout.$el)
				});
			},
		},
		data() {
			return {
				messageList: [],
				// 收支大数据统计
				dayin: false,
				dayout: false,
				monthin: false,
				monthout: false,
				moremeg: false,
				// dayIncome: {},
				// dayOutlay: {},
				// monthIncome: {},
				// monthOutlay: {},
				// 收支大数据
				szdsj: {},
				// 月份收入一览
				line1: {
					tooltip: {
						trigger: "axis"
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "12%",
						containLabel: true
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: [],
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#bababa"
							}
						},
						axisLabel: {
							color: "#525252"
						}
					},
					yAxis: {
						type: "value",
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#bababa"
							}
						},
						axisLabel: {
							color: "#525252"
						},
						splitLine: {
							lineStyle: {
								color: "#e3e3e3"
							}
						}
					},
					series: [{
						data: [],
						type: "line",
						areaStyle: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
										offset: 0,
										color: "#ff6614" // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#ff3529" // 100% 处的颜色
									}
								],
								globalCoord: false // 缺省为 false
							},
							opacity: 1
						}
					}]
				},
				line2: {
					tooltip: {
						trigger: "axis"
					},
					color: "#40a32f",
					grid: {
						left: "3%",
						right: "4%",
						bottom: "12%",
						containLabel: true
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: [],
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#bababa"
							}
						},
						axisLabel: {
							color: "#525252"
						}
					},
					yAxis: {
						type: "value",
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#bababa"
							}
						},
						axisLabel: {
							color: "#525252"
						},
						splitLine: {
							lineStyle: {
								color: "#e3e3e3"
							}
						}
					},
					series: [{
						type: "line",
						data: []
					}]
				}
			};
		}
	};
</script>

<style scoped>
	.cont-top-right {
		padding-right: 0 !important;
	}
	
	.cont-top-left {
		padding-left: 0 !important;
	}
	
	.echart-title {
		margin-top: 20px;
		font-size: 18px;
		color: #525252;
		text-indent: 30px;
	}
	
	.echart-cont {
		width: 100%;
		height: 380px;
	}
	
	.index-echart {
		border: 1px solid #e1e1e1;
		margin-top: 30px;
		background: #fff;
	}
	/* .index {
  width: 94%;
  padding: 0 3%;
  margin-top: 92px;
  float: left;
}
.index-head {
  margin-top: 30px;
  padding: 0 !important;
}
.index-head-left {
  float: left;
  font-size: 24px;
  color: #6b6b6b;
} */
	
	.index-head-right {
		float: right;
		padding: 6px 18px;
		background: #ff461f;
		border-radius: 30px;
		font-size: 16px;
		color: #fff;
		cursor: pointer;
	}
	
	.icon-haibijiahao {
		margin-right: 4px;
	}
	
	.cont-top {
		margin-top: 20px;
	}
	
	.cont-top-c {
		width: 100%;
		height: 292px;
		border-radius: 3px;
		border: 1px solid #e1e1e1;
		background: #fff;
		text-align: center;
		display: flex;
		overflow-y: auto;
	}
	
	.cont-top-c-item {
		width: 25%;
		padding: 50px 0;
		cursor: pointer;
		color: #6b6b6b;
	}
	
	.shouru {
		color: #ff3d24;
		font-size: 24px !important;
		font-family: fontNum4;
	}
	
	.zhichu {
		color: #40a32f;
		font-size: 24px !important;
		font-family: fontNum4;
	}
	
	.cont-top-c-item:first-child {
		border-radius: 3px 0 0 3px;
	}
	
	.cont-top-c-item:last-child {
		border-radius: 0 3px 3px 0;
	}
	
	.cont-top-c-item.on {
		color: #fff;
		background: url("../../static/img/jianbian.jpg");
	}
	
	.cont-top-c-item.on .shouru {
		color: #fff;
	}
	
	.cont-top-c-item.on .zhichu {
		color: #fff;
	}
	
	.cont-top-c-item p {
		width: 100%;
		margin: 20px 0 30px 0;
		font-size: 16px;
	}
	
	.select {
		margin: 20px 0 30px 0;
	}
	
	.cont-top-r {
		width: 100%;
		height: 276px;
		padding: 8px 0;
		border-radius: 3px;
		border: 1px solid #e1e1e1;
		background: #fff;
		text-align: center;
		overflow-y: auto;
	}
	
	.list-item {
		width: 98%;
		float: left;
		padding: 21px 1%;
		line-height: 24px;
		text-align: left;
		display: flex;
	}
	
	.list-item div {
		font-size: 16px;
	}
	
	.list-item-title {
		color: #ff6017;
		flex: 0 0 100px;
		align-self: flex-start;
	}
	
	.list-item-cont {
		color: #6b6b6b;
		cursor: pointer;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		flex: 1 1 auto;
	}
	
	.list-item-time {
		color: #adadad;
		flex: 0 0 90px;
		align-self: flex-end;
		text-align: right;
	}
</style>